<template>
	<view class="goodsDetails">
		<view class="goodsDetails-nav">
			<u-navbar bgColor="#ea64a2" placeholder leftIconColor="#FFFFFF" autoBack>
				<view slot="center">
					<u-search placeholder="请输入商品关键字" :showAction="false" disabled height="55rpx" />
				</view>
			</u-navbar>
		</view>
		<u-skeleton rows="1" rowsHeight="250" :loading="loading" :title="false">
			<view class="goodsDetails-header">
				<u-swiper v-if="form" :list="form.homeImageIds" :autoplay="false" indicatorStyle="right: 20px" :radius="0"
					height="500rpx" @change="e => currentNum = e.current" @click="openPreviewImage">
					<view slot="indicator" class="indicator-num">
						<text class="fs14">{{ currentNum + 1 }}/{{ form.homeImageIds.length }}</text>
					</view>
				</u-swiper>
			</view>
		</u-skeleton>
		<view class="goodsDetails-content">
			<view class="goodsDetails-content-name mb10 mt5">
				<u-skeleton rows="2" rowsHeight="20" :loading="loading" :title="false">
					<text v-if="form.hot" class="fs12 ml5" style="color: #e95b2b;">{{ form.hot }}</text>
					<view class="flex" style="justify-content: space-between;">
						<text style="color: #ff4b02">
							<text class="fs12">￥</text>
							<text class="fs22 mr10">{{ form.price }}</text>
							<text class="fs12 mr10" style="color: #909399;">价格</text>
							<text class="fs12"
								style="color: #909399;text-decoration: line-through;">{{ form.oldPrice }}</text>
						</text>
						<text style="color: #606266;" class="fs14">已售0件</text>
					</view>
					<u-gap height="10" />
					<text style="color: #303133;" class="fs14">{{ form.name || '未命名商品' }}</text>
				</u-skeleton>
			</view>
			<view class="goodsDetails-content-sku">
				<u-skeleton rows="2" rowsHeight="20" :loading="loading" :title="false">
					<u-cell-group>
						<u-cell arrow-direction="left" isLink clickable @click="openSkuPopup">
							<view v-if="form" slot="title" class="fs14">
								<text>选择</text>
								<text v-if="form.skuList && form.skuList.length > 0" class="ml5 fs12"
									style="color: #606266;">{{ form.skuList[0].k }}分类</text>
							</view>
						</u-cell>
						<u-cell clickable>
							<view slot="title" class="fs14">
								<text>发货</text>
								<text class="ml5 fs12"
									style="color: #606266;">从{{ admin.province }}{{ admin.city}}{{ admin.county }}发货</text>
							</view>
						</u-cell>
					</u-cell-group>
				</u-skeleton>
			</view>
		</view>
		<view class="goodsDetails-comment fs14 mb15">
			<u-skeleton rows="1" rowsHeight="20" :loading="loading" :title="false">
				<view class="goodsDetails-comment-header flex">
					<view class="flex">
						<text>宝贝评价 </text>
						(
						<u-badge inverted color="#606266" max="999" showZero :value="commentTotal" />)
					</view>
					<view class="flex fs12" style="color: #ea64a2;" @click="toComment">
						<text>查看全部</text>
						<u-icon name="arrow-right" size="12" color="#ea64a2" />
					</view>
				</view>
			</u-skeleton>
			<u-line />
			<u-skeleton rows="1" rowsHeight="20" :loading="loading" :title="false">
				<view v-if="comment.length > 0" class="goodsDetails-comment-content">
					<view v-for="(item,index) in comment" :key="index" class="goodsDetails-comment-content-card mb5">
						<view class="goodsDetails-comment-content-card-header flex">
							<u--image :showLoading="true" :src="item.user.avatar[0].url" width="70rpx" height="70rpx" />
							<view class="flexCol ml15">
								<text>{{ item.user.userName || '匿名买家' }}</text>
								<text class="fs12" style="color: #909399;">{{ item.createTime | formatTime }}</text>
							</view>
						</view>
						<view class="goodsDetails-comment-content-card-content">
							{{ item.description }}
						</view>
						<u-divider />
					</view>
				</view>
				<view v-else class="flexCenter pt10 pb10">
					宝贝暂无评论
				</view>
			</u-skeleton>


		</view>

		<view v-if="admin" class="goodsDetails-admin mb15">
			<u-skeleton rows="3" avatar avatarSize="120rpx" rowsHeight="15" :loading="loading" :title="false">
				<view class="goodsDetails-admin-content flex">
					<u--image :showLoading="true" lazyLoad :src="admin.avatar[0].url" radius="10" width="120rpx"
						height="120rpx" />
					<view class="ml10">
						<text>{{ admin.userName || '未命名店铺' }}</text>
						<u-gap height="5" />
						<u-rate v-model="admin.count" gutter="6" :touchable="false" allowHalf activeColor="#ea64a2" />
						<text class="fs12" style="color: #909399;">商品数量: {{ admin.goodsTotal }}</text>
					</view>
					<u-button text="进店逛逛" @click="toAdmin" />
				</view>
			</u-skeleton>
		</view>
		<view class="goodsDetails-footer mt15">
			商品详情
		</view>
		<u-skeleton rows="1" rowsHeight="250" :loading="loading" :title="false">
			<view class="goodsDetails-image">
				<u--image v-for="(item,index) in form.detailsImageIds" :key="index" :showLoading="true" lazyLoad
					:src="item.url" width="750rpx" />
			</view>
		</u-skeleton>
		<vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :amount-type="0" :localdata="goodsInfo"
			:mode="skuMode" @add-cart="addCart" @buy-now="buyNow" @close="closeSkuPopup">
		</vk-data-goods-sku-popup>
		<Cbottomview>
			<view class="goodsDetails-menu flex">
				<view class="goodsDetails-menu-left flex">
					<view class="goodsDetails-menu-item flexColCenter">
						<u-icon name="chat" size="40rpx" />
						<text class="fs12">客服</text>
					</view>
					<view class="goodsDetails-menu-item flexColCenter" @click="toShopCar">
						<u-icon name="shopping-cart" size="40rpx" />
						<text class="fs12">购物车</text>
					</view>
					<view class="goodsDetails-menu-item flexColCenter" @click="toAdmin">
						<u-icon name="home" size="40rpx" />
						<text class="fs12">店铺</text>
					</view>
				</view>
				<view class="goodsDetails-menu-right flex">
					<u-button text="加入购物车" @click="openSkuPopup" />
					<u-button text="立即购买" @click="openSkuPopup" />
				</view>
			</view>
		</Cbottomview>
	</view>
</template>

<script>
	import {
		formatTime
	} from '@/utils/util.js'
	import setSkuData from '@/utils/set_Sku_data.js'
	export default {
		mixins: [ setSkuData ],
		options: {
			styleIsolation: 'shared'
		}, // 父组件设置 options.styleIsolation 可穿透子组件，以及页面
		filters: {
			formatTime(value) {
				return formatTime(value)
			}
		},
		data() {
			return {
				loading: true, // 骨架屏
				goodsId: '', // 商品ID
				currentNum: 0, // 当前轮播图索引
				form: '', // 主数据
				// 是否打开SKU弹窗
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsInfo: {
					_id: '',
					name: '',
					goods_thumb: '',
					sku_list: [],
					spec_list: []
				},
				// 店铺信息
				admin: '',
				// 宝贝评价(最多两条)
				comment: [],
				commentTotal: 0 // 评论列表总数
			}
		},
		onShow() {
			const routes = getCurrentPages()
			this.goodsId = routes[routes.length - 1].options.goodsId // 赋值当前页面路径（触发监听
			console.log(routes, 'routes', this.goodsId)
			this.getDetails()
		},
		methods: {
			// 点击立即购买
			async buyNow(selectShop) {
				let list = []
				if (this.form.none_sku) { // 无规格
					list = [{ cart_num: selectShop.buy_num }]
				} else { // 多规格
					list = [{ listId: selectShop._id, cart_num: selectShop.buy_num }]
				}
				const data = [{
					goodsId: this.form.id,
					list
				}]
				uni.navigateTo({
					url: `/pages/order/submit/index?order=${JSON.stringify(data)}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 点击添加购物车
			async addCart(selectShop) {
				console.log(selectShop, 'selectShop')
				const { code } = await this.$shopCart.shopCartAdd({
					goodsId: this.form.id,
					none_sku: this.form.none_sku,
					cart_num: selectShop.buy_num,
					listId: this.form.none_sku ? '' :selectShop._id
				})
				if (code === 0) {
					this.showToast('添加成功')
					this.closeSkuPopup()
				}
			},
			// 关闭选择SKu弹窗组件
			closeSkuPopup() {
				// 是否打开SKU弹窗
				this.skuKey = false,
				// SKU弹窗模式
				this.skuMode = 1,
				// 后端返回的商品信息
				this.goodsInfo = {
					_id: '',
					name: '',
					goods_thumb: '',
					sku_list: [],
					spec_list: []
				},
				// 重置sku选择组件数据
				this.$nextTick(() => {
					this.$refs.skuPopup.init()
				})
			},
			// 打开sku弹窗
			openSkuPopup() {
				this.goodsInfo._id = this.form.id
				this.goodsInfo.name = this.form.name
				this.goodsInfo.goods_thumb = this.form.iconId[0].url
				if (this.form.none_sku) { // 无规格商品
					this.goodsInfo.sku_list = this.setSku_list(this.form, 'none')
					this.goodsInfo.spec_list = this.setSpec_list(this.form.skuList, 'none')
				} else { // 多规格商品
					this.goodsInfo.sku_list = this.setSku_list(this.form)
					this.goodsInfo.spec_list = this.setSpec_list(this.form.skuList)
				}
					this.skuKey = true
			},
			// 点击打开图片预览
			openPreviewImage(idnex) {
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: idnex,
					urls: this.form.homeImageIds
				})
			},
			//  初始化获取商品信息
			async getDetails() {
				this.loading = true
				const {
					code,
					data
				} = await this.$goods.goodsGoodDetails({
					id: this.goodsId
				})
				if (code === 0) {
					this.form = data
					await this.getAdminInfo()
					await this.getComment()
					setTimeout(() => {
						this.loading = false
					}, 400)
				}
			},
			// 获取店铺信息
			getAdminInfo() {
				return new Promise(async (resolve) => {
					const {
						code,
						data
					} = await this.$adminUser.adminUserGetDetails({
						adminId: this.form.adminId
					})
					if (code === 0) {
						const res = await this.$adminUser.adminUserGetList({
							page: 1,
							size: 999,
							adminId: this.form.adminId
						})
						if (res.code === 0) {
							this.admin = data
							this.admin['goodsTotal'] = res.data.total
							resolve()
						}
					}
				})

			},
			// 获取评论列表
			async getComment() {
				return new Promise(async (resolve) => {
					const {
						data,
						code
					} = await this.$comment.commentGetStatusList({
						page: 1,
						size: 999,
						status: 'newest',
						goodsId: this.form.id
					})
					if (code === 0) {
						this.commentTotal = data.total
						this.comment = data.list.slice(0, 2)
						resolve()
					}
				})
			},
			// 跳转到购购物车
			toShopCar() {
				uni.switchTab({
					url: '/pages/shopcar/index'
				})
			},
			// 跳转到评论页
			toComment() {
				uni.navigateTo({
					url: `/pages/comment/comment?goodsId=${this.form.id}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 跳转到店铺页
			toAdmin() {
				uni.navigateTo({
					url: `/pages/adminUser/adminUser?adminId=${this.form.adminId}`,
					animationType: 'pop-in',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-skeleton {
		&__wrapper__content {
			padding: 15rpx;

			&__rows {
				width: 100% !important;
			}
		}
	}

	.goodsDetails {
		&-nav {
			/deep/ .u-search {
				margin-right: 70rpx !important;
			}
		}

		&-header {
			.indicator-num {
				padding: 5rpx 25rpx;
				background: rgba(0, 0, 0, .25);
				color: #FFFFFF;
				border-radius: 30rpx;
			}
		}

		&-content {
			padding: 15rpx;

			&-name {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx 15rpx;
				display: flex;
				flex-direction: column;
			}

			&-sku {
				border-radius: 16rpx;

				/deep/ .u-cell {
					background: #FFFFFF;
				}
			}
		}

		&-comment {
			margin: 15rpx;
			background: #FFFFFF;
			color: #303133;
			border-radius: 16rpx;

			/deep/ .u-skeleton {
				.goodsDetails-comment-header {

					padding: 15rpx 30rpx;
					justify-content: space-between;
				}

				.goodsDetails-comment-content {
					padding: 15rpx 30rpx;

					&-card-content {
						padding: 15rpx;
					}
				}
			}
		}

		&-admin {
			margin: 15rpx;
			background: #FFFFFF;
			color: #303133;
			padding: 15rpx 30rpx;
			border-radius: 16rpx;

			/deep/ .u-skeleton {
				.goodsDetails-admin-content {
					.u-rate {
						pointer-events: none;
					}

					.u-button {
						padding: 15rpx 30rpx !important;
						width: initial;
						height: initial;
						border-radius: 12rpx;

						&__text {
							font-size: 26rpx !important;
						}
					}
				}
			}



		}

		&-footer {
			background: $uni-color-primary;
			padding: 10rpx 20rpx;
			text-align: center;
			color: #FFFFFF;
		}
		&-menu{
			color: #606266;
			justify-content: space-between;
			&-item{
				padding: 10rpx 20rpx;
			}
			&-item:active{
				background-color: rgba(0, 0, 0, 0.2);
			}
			&-right{
				padding: 10rpx;
				/deep/ .u-button:first-child{
					height: initial;
					padding: 20rpx 40rpx;
					color: #FFFFFF;
					background: linear-gradient(to right, #ffd01e, #ff8917) !important;
					border: 0 !important;
					border-radius: 40rpx 0 0 40rpx !important;
				}
				/deep/ .u-button:last-child{
					height: initial;
					padding: 20rpx 40rpx;
					color: #FFFFFF;
					background: linear-gradient(to right, #ff6034, #ee0a24);
					border: 0 !important;
					border-radius: 0 40rpx 40rpx 0 !important;
				}
			}
		}
	}
</style>
